<template>
    <div class="songList" v-for="item in songs" :key="item.id">
        <router-link :to="{ path: '/music', query: { id: item.id } }">
            <van-card :desc="item.ar[0].name" :title="item.name" :thumb="item.al.picUrl">
                <!-- <template #footer>
                    <van-button size="mini" @click="play(item.id)">播放</van-button>
                    <van-button size="mini">下载</van-button>
                </template> -->
            </van-card>
        </router-link>
    </div>
    <audio :src="songMsg.url" ref="audio"></audio>
</template>

<script>
import dayjs from "dayjs";
import bus from '../EventBus'
export default {
    name: 'HomeSong',
    data() {
        return {
            // 音乐储存地
            songs: [],
            // 音乐URL
            songMsg: [],
        }
    },
    mounted() {
        // 缓存有数据就使用缓存数据
        // 将本地缓存的字符串格式取出来转化成对象格式
        if (localStorage.getItem('songsHistory')) this.songs = JSON.parse(localStorage.getItem('songsHistory'))
        // 获取数据
        bus.on('songsRendering', (data) => {
            this.songs = data
        })
    },
    unmounted() {
        localStorage.setItem('songsHistory', JSON.stringify(this.songs))
    },
    methods: {
        // async play(id) {
        //     console.log(id);
        //     // 请求播放的URL
        //     const { data } = await this.$http.get('/song/url', {
        //         params: {
        //             id: id
        //         }
        //     })
        //     // 判断歌曲是否存在
        //     if (dayjs(data.data[0].time).$m === 0 && dayjs(data.data[0].time).$s <= 30) return alert('无法获取该歌曲音源！')
        //     // 赋值给数据储存 缓存到本地
        //     this.songMsg = data.data[0];
        //     localStorage.setItem(id, JSON.stringify(data.data[0]))
        //     this.songMsg.time = dayjs(this.songMsg.time).format('mm:ss')
        // }
    }
}
</script>

<style lang="less" scoped>
.songList:last-child {
    padding-bottom: var(--van-tabbar-height);

    .van-card {
        background-color: #fff;

    }
}
</style>